<template>
  <baseCard
    :title="'需求跟踪'"
    height="3.8rem"
    contentPadding="0.2rem"
    style="margin-right: 0; margin-left: 0; margin-bottom: 0rem"
  >
    <div class="trace-content">
      <div class="trace-content-left">
        <div class="left-top">
          <div
            :class="type == 0 ? 'default-active' : 'default'"
            @click="handleChange(0)"
          >
            <span class="label">需求总数:</span>
            <span class="value">{{ addThousandsSeparator(total) }}</span>
          </div>
          <div
            :class="type == 1 ? 'default-active' : 'default'"
            @click="handleChange(1)"
          >
            <span class="label">其中：通过评审需求数</span>
            <span class="value">{{ addThousandsSeparator(passTotal) }}</span>
          </div>
        </div>
        <div class="left-content">
          <div v-show="type == 0" class="table-view">
            <vptBaseTable1001
              :loading="loading"
              :columns="columns"
              :dataList="tableData"
              :showPagination="false"
              :scrollbar="true"
              :scroll="scroll"
            >
              <template #cell="{ record, column }">
                {{ getCellValue(record, column) }}
              </template>
              <template #summary-cell="{ record, column }">
                {{ getCellValue(record, column) }}
              </template>
            </vptBaseTable1001>
          </div>

          <div v-show="type == 1" class="bar-view">
            <VptReviewBar
              :passData="passData"
              :isLandscape="isLandscape"
            ></VptReviewBar>
          </div>
        </div>
      </div>
      <div class="trace-content-right">
        <vptTabs
          v-bind="$attrs"
          :active="active"
          @change="change"
          :tabsStyle="tabsStyle"
          width="4.2rem"
          height="2.8rem"
          :endValue="4"
          :bottom="40"
          :chartType="chartType"
          :iconWidth="22"
          :iconHeight="14"
          :labelFontSize="10"
          :valueFontSize="11"
          :barWidth="10"
        ></vptTabs>
      </div>
    </div>
  </baseCard>
</template>

<script setup>
import { ref, reactive, computed } from "vue";
import { addThousandsSeparator } from "@/utils/formatter.js";
import baseCard from "@/components/vpt-cards-1001/index.vue";
import vptTabs from "@/components/vpt-tabs/index.vue";
import vptBaseTable1001 from "@/components/vpt-base-table-1001/index.vue";
import VptReviewBar from "./components/vpt-review-bar.vue";

const props = defineProps({
  isLandscape: { type: Boolean, default: false },
  chartType: { type: String, default: "" },
  tableData: { type: Array, default: () => {} },
  passData: { type: Array, default: () => {} },
  traceData: { type: Object, default: () => {} },
  height: { type: String, default: "7.15rem" },
});

const type = ref(0);
const tabsStyle = {
  width: "4.2rem",
  height: "3.0rem",
  marginTop: "0",
};
const scroll = {
  y: "94%",
};

const active = ref("1");

const change = (value) => {
  active.value = value;
};

defineOptions({
  name: "vptModuleTrace",
});

let loading = ref(false);

let columns = reactive([
  {
    title: "模块",
    dataIndex: "app_business",
    align: "left",
    // width: "320",
  },
  {
    title: "数量",
    dataIndex: "app_num",
    align: "center",
    width: 90,
  },
  {
    title: "占比",
    dataIndex: "app_percent",
    align: "center",
    width: 90,
  },
]);
const total = computed(() => {
  return props.tableData.reduce((pre, cur) => {
    return pre + cur.app_num;
  }, 0);
});

const passTotal = computed(() => {
  return props.passData.reduce((pre, cur) => {
    return pre + cur.value;
  }, 0);
});

const handleChange = (value) => {
  type.value = value;
};

const getCellValue = (record, column) => {
  // if (column.dataIndex === "app_num") return record[column.dataIndex];
  return addThousandsSeparator(record[column.dataIndex]);
};
</script>

<style lang="less" scoped>
.trace-content {
  width: 100%;
  display: flex;
  justify-content: space-between;

  .trace-content-left {
    flex: 1;
    display: flex;
    flex-direction: column;

    .left-top {
      display: flex;
      justify-content: space-between;
      .default {
        width: 1.9rem;
        height: 0.46rem;
        border: 1px solid #E6EBF5;
        border-radius: 4px;
        padding: 0.12rem;
        cursor: pointer;
      }
      .default-active {
        width: 1.9rem;
        height: 0.55rem;
        background-image: url("../../../assets/img/theme1/tabs.png");
        background-size: 100% 100%;
        padding: 0.12rem;
        cursor: pointer;
      }
      .label {
        display: block;
        font-size: 0.14rem;
        color: #4E5969;
      }
      .value {
        display: block;
        font-size: 0.22rem;
        color: #1D2129;
        margin-top: 0.08rem;
      }
    }
    .left-content {
      flex: 1;

      .table-view {
        height: 2.2rem;
        margin-top: 0.16rem;
      }
      .bar-view {
        height: 100%;
      }
    }
  }

  .trace-content-right {
    margin-left: 0.2rem;
    width: 4.2rem;
  }
}
</style>